// 主页面（Tab导航）
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,TabBarIOS,NavigatorIOS} from 'react-native';

// 引入外部的组件
let Home    = require('../Component/XMGTab1_Home');
let Find    = require('../Component/XMGTab2_Find');
let Message = require('../Component/XMGTab3_Message');
let Mine    = require('../Component/XMGTab4_Mine');

let Main = React.createClass({

    // 初始化方法
    getInitialState(){
       return{
          selectedItem: 'home'  // 设置选中标识：默认首页被选中
       }
    },

    render() {
        return (
            <TabBarIOS tintColor = "orange">

                {/*首页（默认）*/}
                <TabBarIOS.Item
                     icon   = {require('image!tabbar_home')}
                   title    = "首页"
                   selected = {this.state.selectedItem === 'home'}
                   onPress  = {()=>{this.setState({selectedItem: 'home'})}} >

                   {/* 导航栏设置 */}
                   <NavigatorIOS
                       tintColor    = "orange"
                       style        = {{flex:1}}
                       // 指定默认的页面，也就是启动的组件页面
                       initialRoute = {
                          {
                            component: Home, // 具体的版块(跳转的页面)
                            title:'网易',     // 页面标题
                            leftButtonIcon :require('image!navigationbar_friendattention'), // 左导航按钮
                            rightButtonIcon:require('image!navigationbar_pop')              // 右导航按钮
                          }
                       } />

                </TabBarIOS.Item>

                {/*消息*/}
                <TabBarIOS.Item
                    icon      = {require('image!tabbar_discover')}
                    title     = "发现"
                    selected  = {this.state.selectedItem === 'find'}
                    onPress   = {()=>{this.setState({selectedItem: 'find'})}} >

                    {/* 导航栏设置 */}
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute = {
                          {
                            component: Find, // 具体的版块
                            title:'发现'
                          }
                       }/>

                </TabBarIOS.Item>

                {/*发现*/}
                <TabBarIOS.Item
                    icon      = {require('image!tabbar_message_center')}
                    title     = "消息"
                    selected  = {this.state.selectedItem === 'discover'}
                    onPress   = {()=>{this.setState({selectedItem: 'discover'})}}>

                    {/* 导航栏设置 */}
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute = {
                          {
                            component: Message, // 具体的版块
                            title:'消息'
                          }
                       }/>

                </TabBarIOS.Item>

                {/*我的*/}
                <TabBarIOS.Item
                    icon      = {require('image!tabbar_profile')}
                    title     = "我的"
                    selected  = {this.state.selectedItem === 'mine'}
                    onPress   = {()=>{this.setState({selectedItem: 'mine'})}}>

                    {/* 导航栏设置 */}
                    <NavigatorIOS
                        style={{flex:1}}
                        initialRoute = {
                          {
                            component: Mine, // 具体的版块
                            title:'我的'
                          }
                       }
                    />

                </TabBarIOS.Item>

            </TabBarIOS>
        );
    }
});

// 输出类
module.exports = Main;
